<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
		<tm-menubars color="primary" title="年度统计" :shadow="0">
		</tm-menubars>
		<view :class="[$tm.vx.state().tmVuetify.black ? 'black' : $tm.vx.state().tmVuetify.color || 'primary']">
			<view class=" py-32" style=""
				:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : $tm.vx.state().tmVuetify.color || 'primary']">
				<view class="text-size-s text-align-center text-white">
					<tm-pickersDate @confirm="selectTime" @input="changeValue"
						:showDetail="{year:true,month:false,day:false,hour:false,min:false,sec:false}">
						<text>{{ time }}</text>
					</tm-pickersDate>

					<tm-sheet :black="false" color="#FF9800">
						<view class="text-size-n">
							<tm-row>
								<view>结余：{{money.jie}}</view>
							</tm-row>
							<tm-divider color="white"></tm-divider>
							<tm-row>
								<tm-col :grid="6">
									<view class="text-align-left">收入：{{money.shou}}
									</view>
								</tm-col>
								<tm-col :grid="6">
									<view class="text-align-right">支出：{{money.zhi}}</view>
								</tm-col>
							</tm-row>
						</view>
					</tm-sheet>
				</view>
			</view>
			<view>
				<tm-table :list="jieyuList"></tm-table>
			</view>
		</view>
	</view>
</template>

<script>
	// https://roundicons.com/icon-packs/free-christmas-icons/
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmTabs from "@/tm-vuetify/components/tm-tabs/tm-tabs.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmGrid from "@/tm-vuetify/components/tm-grid/tm-grid.vue"
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmKeyborad from "@/tm-vuetify/components/tm-keyborad/tm-keyborad.vue"
	import tmPickersDate from "@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue"
	import tmTable from "@/tm-vuetify/components/tm-table/tm-table.vue"
	import tmDivider from "@/tm-vuetify/components/tm-divider/tm-divider.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	export default {
		components: {
			tmTabs,
			tmMenubars,
			tmGrid,
			tmSheet,
			tmIcons,
			tmInput,
			tmKeyborad,
			tmPickersDate,
			tmTable,
			tmRow,
			tmCol,
			tmDivider
		},
		data() {
			return {
				time: '',
				list: ['支出', '收入'],
				activeIndex: 0,
				show: true,
				word: '',
				type: {},
				er: 0,
				times: '',
				types: [],
				month: '',
				day: '',
				charts: {},
				monthData: {},
				dayData: {},
				now: '',
				Showhiddenunits: false,
				showCanvas: true,
				money: {
					shou: 0,
					zhi: 0,
					jie: 0
				},
				jieyuList: {
					headerBgcolor: 'orange',
					header: [{
							text: '月份',

						},
						{
							text: '收入',
						},
						{
							text: '支出'
						},
						{
							text: '结余'
						}
					],
					col: []

				}
			};
		},
		watch: {
			Showhiddenunits(newValue, oldValue) {
				this.showCanvas = !newValue
			},
		},
		created() {
			this.sys = uni.getSystemInfoSync();
			// #ifdef H5
			this.bottom = 55
			// #endif
		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif

		},
		onShow() {
			this.getCurrentTime()
			this.loadType()
			// this.$refs.teCartMonth.init();
			// this.loadMonthData();
			// this.loadDayData();
			// this.$refs.teCartMonthDay.init();
		},
		mounted() {
			this.getCurrentTime()
			this.loadType()
		},
		methods: {
			changeValue(val) {
				this.Showhiddenunits = val;
			},
			loadDayData() {
				this.judgeLogin(res => {
					this.$ajax.post('/bill/statisticsday', {
						uid: res.id,
						er: this.er,
						time: this.now
					}).then(res => {
						let data = {
							title: {
								subtext: '天统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
							series: [{
								name: '天统计',
								type: 'pie',
								radius: '50%',
								data: res.data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						}
						let money = 0;
						res.data.forEach(i => {
							money = money + i.value
						})
						this.day = this.list[this.er] + money.toFixed(2) + '元'
						this.dayData = data;
					})
				})
			},
			loadMonthData() {
				this.judgeLogin(res => {
					this.$ajax.post('/bill/statistics', {
						uid: res.id,
						er: this.er,
						time: this.time
					}).then(res => {
						let data = {
							title: {
								subtext: '月统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
							series: [{
								name: '月统计',
								type: 'pie',
								radius: '50%',
								data: res.data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						}
						let money = 0;
						res.data.forEach(i => {
							money = money + i.value
						})
						this.month = this.list[this.er] + money.toFixed(2) + '元'
						this.monthData = data;
						// a.setOption(data)
						// this.charts = a
					})
				})
			},
			loadType() {
				this.judgeLogin((res) => {
					this.$ajax.post('/bill/year',{
						time: this.time,
						uid: res.id
					}).then(res => {
						if(res.code == 1) {
							let s = 0;
							let c = 0;
							let arr = []
							for(let i in res.data) {
								let a = [
									{text: res.data[i].month},
									{text: res.data[i].shouru},
									{text: res.data[i].zhichu},
									{text: (res.data[i].shouru - res.data[i].zhichu).toFixed(2)}
								]
								arr.push(a)
								
								s = s + res.data[i].shouru
								c = c + res.data[i].zhichu
							}
							this.money.shou = s
							this.money.zhi = c
							this.money.jie = (s - c).toFixed(2)
							this.jieyuList.col = arr
						}
					})
				});
				
			},
			selectType(e) {
				this.type = e.data
			},
			closeKey() {
				this.show = false;
			},
			open() {
				this.show = true;
			},
			selectTime(e) {
				this.time = e.year
				this.loadType()
			},
			getCurrentTime() {
				//获取当前时间并打印
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				this.time = yy
				this.now = yy + '/' + mm + '/' + dd
			},
			change(e) {
				this.word = ''
				this.type = {}
				this.er = e
				this.loadType()
				// this.$refs.teCartMonth.init();
				// this.$refs.teCartMonthDay.init();
				// this.loadMonthData();
				// this.loadDayData();
			},
			confirm(val) {
				this.show = true;
				if (val <= 0) {
					uni.$tm.toast('金额无效');
					return;
				}
				this.judgeLogin((res) => {
					this.$ajax.post('/bill/save', {
						type: this.type.id,
						er: this.er,
						value: val,
						uid: res.id,
						time: this.time
					}).then(res => {
						this.word = ''
						this.type = {}
					})
				});

			}
		}
	};
</script>

<style lang="scss">
	page,
	body {
		min-height: 100%;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped></style>
